<template>
  <div align="center">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">

      <div align="center">
        <el-button @click="choiceHousing">选择楼盘</el-button>
        <el-dialog title="房源列表" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <!--              <el-table-column property="housingId" label="楼盘ID" width="150"></el-table-column>-->
            <el-table-column property="housingName" label="楼盘名称" width="150"></el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">选中</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
      <el-form-item label="楼盘id" prop="housingId">
        <el-input v-model="form.housingId" placeholder="请输入楼盘id" />
      </el-form-item>
      <el-form-item label="楼盘名称" prop="houseName">
        <el-input v-model="form.housingName" placeholder="请输入楼盘名称" />
      </el-form-item>
      <el-form-item label="房源名称" prop="houseName">
        <el-input v-model="form.houseName" placeholder="请输入房源名称" />
      </el-form-item>
      <el-form-item label="租赁方式" prop="rentMethod">
        <el-radio-group v-model="form.rentMethod">
          <el-radio label="1">整租</el-radio>
          <el-radio label="2">合租</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="楼号" prop="buildingNum">
        <el-input v-model="form.buildingNum" placeholder="请输入楼号" />
      </el-form-item>
      <el-form-item label="单元号" prop="buildingUnit">
        <el-input v-model="form.buildingUnit" placeholder="请输入单元号" />
      </el-form-item>
      <el-form-item label="门牌号" prop="buildingFloorNum">
        <el-input v-model="form.buildingFloorNum" placeholder="请输入门牌号" />
      </el-form-item>
      <el-form-item label="装修" prop="decoration">
        <el-radio-group v-model="form.decoration">
          <el-radio label="1">精装</el-radio>
          <el-radio label="2">简装</el-radio>
          <el-radio label="3">毛坯</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="楼层，如：8/26" prop="floor">
        <el-input v-model="form.floor" placeholder="请输入楼层，如：8/26" />
      </el-form-item>
      <el-form-item label="租金" prop="rent">
        <el-input v-model="form.rent" placeholder="请输入租金" />
      </el-form-item>
      <el-form-item label="付款方式" prop="paymentMethod">
        <el-select v-model="form.paymentMethod">
          <el-option v-for="t in payments" :key="t.id" :value="t.id" :label="t.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房产面积" prop="coveredArea">
        <el-input v-model="form.coveredArea" placeholder="请输入房产面积" />
      </el-form-item>
      <el-form-item label="朝向" prop="orientation">
        <el-radio-group v-model="form.orientation">
          <el-radio label="东">东</el-radio>
          <el-radio label="西">西</el-radio>
          <el-radio label="南">南</el-radio>
          <el-radio label="北">北</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="房间区域图片" prop="roomPic">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>

      <el-form-item label="公共区域图片" prop="areaPic">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>

      <el-form-item label="联系人" prop="contact">
        <el-input v-model="form.contact" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="看房时间" prop="time">
        <el-radio-group v-model="form.time">
          <el-radio label="1">上午</el-radio>
          <el-radio label="2">中午</el-radio>
          <el-radio label="3">下午</el-radio>
          <el-radio label="4">晚上</el-radio>
          <el-radio label="5">全天</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="房源创建时间" prop="createdTime">
        <el-date-picker clearable
                        v-model="form.createdTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择房源创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="房源更改时间" prop="updatedTime">
        <el-date-picker clearable
                        v-model="form.updatedTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择房源更改时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户id" prop="userId">
        <el-input v-model="form.userId" placeholder="请输入用户id" />
      </el-form-item>

      <el-form-item label="省" prop="pid">
        <el-select v-model="form.pid" placeholder="请选择省" @change="seachShi()">
          <el-option
            v-for="item in shengList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="市" prop="sid">
        <el-select v-model="form.sid" placeholder="请选择市" @change="seachQu()">
          <el-option
            v-for="item in shiList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="区" prop="xid">
        <el-select v-model="form.xid" placeholder="请选择区">
          <el-option
            v-for="item in quList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="房东id" prop="landlordId">
        <el-input v-model="form.landlordId" placeholder="请输入房东id" />
      </el-form-item>
      <el-form-item label="房源介绍" prop="houseDesc">
        <el-input v-model="form.houseDesc" placeholder="请输入房源介绍" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {selHousing, addHouse} from "@/api/house/house";
import SparkMD5 from 'spark-md5';
import {searchRegion} from "@/api/house/housing";

export default {
  name: "add",
  data(){
    return{
      gridData:[],
      dialogTableVisible:false,
      form:{},
      rules:{

      },
      payments: [{ id: 1, name: '押一付一' }, { id: 2, name: '押三付二' }, { id: 3, name: '押一付一六' }, { id: 4, name: '一年付' }],
      shengList: [],
      shiList: [],
      quList: [],
      options: {
        target: "http://39.98.78.239:8080/file/postFileUpload",  //目标上传 URL
        chunkSize: '2048000',       //分块大小
        fileParameterName: 'file',  //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,         //最大自动失败重试上传次数
        testChunks: false,          //是否开启服务器分片校验
      },
    }
  },
  created() {
    this.searchSheng();
  },
  methods:{
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateHouse(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
            });
          } else {
            addHouse(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$router.push({path:"/house/index"});
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        houseName: null,
        housingId: null,
        rentMethod: null,
        houseStatus: "0",
        buildingNum: null,
        buildingUnit: null,
        buildingFloorNum: null,
        houseType: null,
        decoration: null,
        floor: null,
        rent: null,
        paymentMethod: null,
        coveredArea: null,
        orientation: null,
        roomPic: null,
        areaPic: null,
        contact: null,
        mobile: null,
        time: null,
        createdTime: null,
        updatedTime: null,
        userId: null,
        pid: null,
        sid: null,
        xid: null,
        address: null,
        labelType: null,
        landlordId: null,
        houseDesc: null,
        publishStatus: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    choiceHousing(){
      selHousing().then(response => {
        this.gridData = response.rows;
        this.dialogTableVisible=true;

      });
    },
    handleClick(data){
      this.form.housingId=data.id
      this.form.housingName=data.housingName
      this.dialogTableVisible=false
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 省 下拉框*/
    searchSheng() {
      var id = 1;
      searchRegion(id).then(response => {
        this.shengList = response;
        this.shiList = null;
        this.quList = null;
      });
    },
    /** 市 下拉框*/
    seachShi() {
      if (this.form.pid != null) {
        searchRegion(this.form.pid).then(response => {
          this.shiList = response;
          this.quList = null;
        });
      }
    },
    /** 区 下拉框*/
    seachQu() {
      if (this.form.sid != null) {
        searchRegion(this.form.sid).then(response => {
          this.quList = response;
        });
      }
    },
    onFileAdded(file) {
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    }
  }
}
</script>

<style scoped>

</style>
